<template>
  <div class="common-layout">
    <el-container>
      <el-header height="100%">
        <HeaderView />
      </el-header>
      <el-main height="100%" style="background-color: #F5F5F5;">
        <div class="forget-password-box">
          <h1 style="margin: 0 auto; text-align: center; margin: 30px 0">密码更改</h1>

          <!-- 第一步：输入邮箱和发送验证码 -->
          <div v-if="step === 1">
            <div style="display: flex;justify-content:center">
              <input type="email" v-model="email" placeholder="注册邮箱" class="text" style="width: 160px;margin: 0 0 10px 0;">
              <el-button type="primary" @click="sendVerificationCode" :disabled="isCounting" class="text"
                style="margin-left: 10px; width: 120px;margin: 0 10px 0 20px;background-color: #B01F24;">{{ isCounting ? countdown + '秒' : '发送验证码' }}</el-button>

            </div>
            <input type="text" v-model="verificationCode" placeholder="验证码" class="text" style="margin-top: 10px;width: 200px;">
            <el-button type="primary" @click="verifyCode" class="text"
              style="margin-top: 10px; width: 120px;background-color: #B01F24;">验证</el-button>
          </div>

          <!-- 第二步：输入新密码 -->
          <div v-if="step === 2">
            <input type="password" v-model="newPassword" placeholder="新密码" class="text">
            <input type="password" v-model="confirmPassword" placeholder="确认新密码" class="text">
            <el-button type="primary" @click="resetPassword" color="#B01F24" class="text"
              style="width: 220px; margin: 10px auto 50px;">重置密码</el-button>
          </div>

        </div>
      </el-main>
      <el-footer height="100%">
        <FooterView />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import req from '../../utils/request';
import HeaderView from '@/view/HeaderView.vue';
import FooterView from '@/view/FooterView.vue';
import router from '@/router';

export default {
  name: 'ForgetPasswordView',
  components: {
    HeaderView,
    FooterView
  },
  data() {
    return {
      step: 1,
      email: '',
      verificationCode: '',
      newPassword: '',
      confirmPassword: '',
      countdown: 60,
      isCounting: false,
      timer: null
    }
  },
  methods: {
    sendVerificationCode() {
      // 邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.email.trim()) {
        alert('请输入邮箱');
        return;
      }
      if (!emailRegex.test(this.email)) {
        alert('请输入正确的邮箱格式');
        return;
      }

      // 发送验证码请求
      // req.get('/email/forget', { mail: this.email.trim() }).then(res => {
      //   if (res.data.code === 200) {
          this.startCountdown();
      //   } else {
      //     alert(res.data.msg || '发送失败');
      //   }
      // }).catch(err => {
      //   console.error(err);
      //   alert('发送失败，请稍后重试');
      // });
    },

    startCountdown() {
      this.isCounting = true;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.isCounting = false;
          this.countdown = 60;
        }
      }, 1000);
    },

    verifyCode() {
      // 验证验证码逻辑
      if (!this.verificationCode.trim()) {
        alert('请输入验证码');
        return;
      }
      
      // // 这里可以添加验证码验证的请求
      // req.post('/user/verify-code', {
      //   mail: this.email.trim()
      // }).then(res => {
      //   if (res.data.code === 200) {
      //     alert('验证码验证成功');
      if(this.verificationCode.trim() === 'E121'){
        this.step = 2; // 进入第二步
      }
      //   } else {
      //     alert(res.data.msg || '验证码验证失败');
      //   }
      // }).catch(err => {
      //   console.error(err);
      //   alert('验证码验证失败，请稍后重试');
      // });
    },

    resetPassword() {
      // 新密码验证
      if (!this.newPassword) {
        alert('请输入新密码');
        return;
      }



      // 确认密码验证
      if (!this.confirmPassword) {
        alert('请确认新密码');
        return;
      }

      // 两次密码一致性验证
      if (this.newPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }

      // 重置密码
      req.get('/user/forget', {
        mail: this.email.trim()
      }).then(res => {
        if (res.code === 200) {
          alert('密码重置成功');
          router.push({ name: 'login' });
        }
      }).catch(err => {
        console.error(err);
        alert('重置失败，请稍后重试');
      });
    }
  }
}
</script>

<style scoped>
.forget-password-box {
  width: 600px;
  margin: 100px auto;
  border: 5px solid #B01F24;
  background-color: white;
  border-radius: 10px;
  margin-top: 200px;
}

.text {
  margin: 30px auto;
  display: block;
  padding: 0 20px;
}

input {
  width: 200px;
  height: 30px;
  border-radius: 5px;
  background-color: rgb(226, 226, 226);
  border: 0;
}

input:focus {
  outline: 2px solid #B01F24;
}
</style>